import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Icon, TabBar, Tools, List, Button } from 'weaver-mobile';
import { Route, withRouter, Switch } from 'react-router-dom';
import { asyncComponent } from 'react-async-component';
import { Form } from 'weaver-mobile-page';
import { getUrlParams } from "../../util"
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class Card extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const { layoutid, type, billid, feaid, modeId, iscustomView, isecmeview, rute } = this.props;
    this.props.cardStore.init({ layoutid, type, billid, feaid, modeId, iscustomView, isecmeview, rute });
  }

  getFields = () => {
    const { form } = this.props.cardStore;
    const { conditioninfo, isInit } = form;
    const fields = [];
    if (isInit) {
      conditioninfo.forEach((group) => {
        group.items.forEach((field, index) => {
          let bdClass = index == 0 ? "l-top" : "l-other";
          let fieldid = field.fieldid ? field.fieldid : (field.otherParams || { "fieldid": "" }).fieldid;
          fields.push(
            <div className={"cube-field-wrap field_" + fieldid + " " + bdClass}>
              <Form.Item
                key={field.domkey.join('__')}
                form={form}
                fieldConfig={field}
                onChange={(a, b) => { form.onChange(a, b); this.changeField(a, b); }}
              />
            </div>);
        });
      });
    }
    return fields;
  }

  changeField = (a, b) => {
    try {
      this.props.onFieldChange(a, b);
    } catch (e) {

    }
  }
  componentWillReceiveProps(nextProps) {
    const prePath = this.props.location.pathname;
    const curPath = nextProps.location.pathname;
  }

  handleSubmit = () => {
    const { handleSubmit } = this.props.cardStore;
    handleSubmit();
  }

  render() {
    const { form } = this.props.cardStore;
    const { isInit } = form;
    let fields = [];
    fields = this.getFields();
    return (<div className="g-comForm">
      <div className="cube-mobileForm">
        {isInit && fields}
        <div id="custompageCodeArea" style={{ display: "none" }}></div>
      </div>
    </div>
    )
  }
}